<template>
    <div class="container">
        <div class="login">
            <h3 class="login-title text-center fontsize-18 f-w-n space-lt color-login">房地产管理平台</h3>
            <el-form class="form" :model="loginData" :rules="rules" ref="loginData">
                <!-- 不能是v-model 只能是:model -->
                <el-form-item class="m-t-20" prop="login_account">
                    <el-input 
                    v-model="loginData.login_account"
                    placeholder="请输入用户名" 
                    prefix-icon="iconfont saimingtechlogin_user color-login"
                    clearable
                    ></el-input>
                    <!-- 要在表单内能输入，必须在v-input中要有v-model  -->
                </el-form-item>
                <el-form-item class="m-t-20" prop="login_password">
                    <el-input 
                    v-model="loginData.login_password"
                    placeholder='请输入密码' 
                    prefix-icon="iconfont saimingtechlogin_lock color-login" 
                    clearable
                    type="password"
                    ></el-input>
                </el-form-item>
                <el-form-item class="m-t-20" prop="login_code">
                    <el-input 
                    v-model="loginData.login_code"
                    placeholder='请输入验证码' 
                    prefix-icon="iconfont saimingtechlogin_test color-login" 
                    style="width:130px"
                    clearable
                    ></el-input>
                    <!-- <span class="checkcode" @click="checkcode()">验证码</span> -->
                    <div class="code" @click="refreshCode">
                        <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                </el-form-item>
            </el-form>
            <el-button 
                type="primary" 
                class="loginBtn space-lt fontsize-16"
                @click="login('loginData')"
            >登录</el-button>
        </div>
        <footer>
            <p>copyright(C)2010-2011</p>
            <p>鲁ICP备12003508</p>
            <p>公安备</p>
        </footer>
    </div>
</template>

<script>
import SIdentify from '../components/identify'
export default {
    name:"login",
    components:{
        's-identify':SIdentify
    },
    data(){
        // const validatePass = (rule, value, callback) => {
        //     const patt = /^(?!bai[0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        //     if (value == ''){
        //         callback(new Error('请输入密码'))
        //     } else if (!patt.test(value)){
        //         callback(new Error('6-12数字字母组成!'))
        //     } else {
        //         callback()
        //     }
        // }

        const validateCode = (rule,value,callback) => {
            console.log(value,typeof value)
            value = value.toUpperCase()
            if(value != this.identifyCode.toUpperCase()){
                callback(new Error('请输入正确的验证码'))
            } else {
                callback()
            }
        }
        return{
            identifyCodes:'abcdefghijklmnopqrstuvwxyz1234567890',
            identifyCode:'',
            loginData: {
                login_account:'',
                login_password:'',
                login_code:''
            },
            rules:{
                login_account:[
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    {
                        min: 11,
                        max: 11,
                        message: '请检查手机号码是否正确',
                        trigger: 'blur',
                    },
                ],
                login_password:[
                    // { validator: validatePass, trigger:'blur'},
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                login_code:[
                    { validator: validateCode, trigger: 'blur'}
                ]
            },
            loading:false
        }
    },
    methods:{
        // checkcode(){
        //     let str = 'abcdefghijklmnopqrstuvwxyz'
        //     str = str.concat('0123456789',str.toUpperCase())
        //     let arr = str.split('')
        //     let ranCode = ''
        //     for(let i = 0;i < 4;i++){
        //         let ranIndex = parseInt(Math.random()*arr.length)
        //         ranCode += arr[ranIndex]
        //     }
        //     console.log(ranCode)
        // }
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[
                this.randomNum(0, this.identifyCodes.length)
            ]
        }
        console.log(this.identifyCode)
        },
        // 登录
        login(formName){
            // 通过 this.$refs[formName] 引用表单
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    this.loading = true
                    const res = await this.$http.post('/user_login/login',{
                        "login_account":this.loginData.login_account,
                        "login_password":this.loginData.login_password
                    });
                    console.log(res)
                    if(res.status == 200){
                        this.$message({
                            message:'登录成功',
                            type:'success'
                        });
                        this.loading = false
                        this.$router.push('/Home')
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    mounted() {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
        // 获取焦点  原因是：使用element-ui的input渲染后外层包裹的标签影响所以需要通过 ref 属性指向标签引用 在js代码中使用 this.$refs.ref指定的引用对象调用focus方法
        // this.$refs.myfocus.focus()
    },
}

</script>

<style lang="less">

    .login {
        width: 250px;
        height: 300px;
        padding: 50px 75px;
        background-color: white;
        position: fixed;
        right: 100px;
        top: 30%;
    }

    .loginBtn{
        width: 100%;
        background-color: #2F41E7;
    }

    .container{
        height: 100%;
        min-width: 1280px;
        background:url(../assets/image/login_bg@2x.jpg);
        background-size: 100% 100%;
    }

    footer{
        width: 1280px;
        display: flex;
        justify-content: space-around;

        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);

        color: white;
        font-size: 12px;
    }

    .form{
        position: relative;
    }

    // .checkcode{
    //     position: absolute;
    //     right: 0;
    //     bottom: 0;
    //     width: 100px;
    //     height: 42px;
    //     background-color: yellow;
    // }

    .code {
        width: 110px;
        height: 40px;
        //   border: 1px solid red;
        position: absolute;
        right: 0;
        bottom: 0;
    }
</style>